import { useBridge } from '@bnb-chain/canonical-bridge-widget'
import { Svg, SvgProps } from '@pancakeswap/uikit'
import { keyframes, styled } from 'styled-components'

export const RefreshingIcon = (props: SvgProps) => {
  const { isGlobalFeeLoading, isRefreshing } = useBridge()
  return (
    <StyledSVG width="32px" height="32px" viewBox="0 0 20 20" fill="none" {...props}>
      <circle cx="10.12" cy="10.12" r="9.12" fill="#1FC7D4" fill-opacity="0.2" />
      <mask
        id="mask0_1009_72807"
        style={{
          maskType: 'alpha',
        }}
        maskUnits="userSpaceOnUse"
        x="-3"
        y="-1"
        width="24"
        height="21"
      >
        <path fill-rule="evenodd" clip-rule="evenodd" d="M21 -1H-3V20H21V-1ZM11 0H0V11H11V0Z" fill="#D9D9D9" />
      </mask>
      <g mask="url(#mask0_1009_72807)">
        <circle
          className={!isGlobalFeeLoading && !isRefreshing ? 'refreshBorder' : undefined}
          cx="10.12"
          cy="10.12"
          r="8.12"
          stroke="#1FC7D4"
          stroke-width="2"
          stroke-linecap="round"
          strokeDasharray={54}
          strokeDashoffset={54}
        />
      </g>
      <mask
        id="mask1_1009_72807"
        style={{
          maskType: 'alpha',
        }}
        maskUnits="userSpaceOnUse"
        x="4"
        y="3"
        width="13"
        height="13"
      >
        <rect x="4.64795" y="3.9184" width="11.6736" height="11.6736" fill="#48D0DB" />
      </mask>
      <g mask="url(#mask1_1009_72807)">
        <path
          d="M10.5093 13.6463C9.42301 13.6463 8.49885 13.2693 7.73683 12.5154C6.9748 11.7615 6.59379 10.8414 6.59379 9.75509V9.66997L6.15603 10.1077C6.06685 10.1969 5.95336 10.2415 5.81555 10.2415C5.67774 10.2415 5.56424 10.1969 5.47507 10.1077C5.3859 10.0186 5.34131 9.90506 5.34131 9.76725C5.34131 9.62944 5.3859 9.51594 5.47507 9.42677L6.73971 8.16213C6.83699 8.06485 6.95048 8.01621 7.08019 8.01621C7.20989 8.01621 7.32339 8.06485 7.42067 8.16213L8.68531 9.42677C8.77448 9.51594 8.81907 9.62944 8.81907 9.76725C8.81907 9.90506 8.77448 10.0186 8.68531 10.1077C8.59613 10.1969 8.48264 10.2415 8.34483 10.2415C8.20701 10.2415 8.09352 10.1969 8.00435 10.1077L7.56659 9.66997V9.75509C7.56659 10.5658 7.85235 11.2548 8.42387 11.8223C8.99539 12.3898 9.69053 12.6735 10.5093 12.6735C10.639 12.6735 10.7667 12.6654 10.8923 12.6492C11.018 12.633 11.1416 12.6046 11.2632 12.564C11.401 12.5235 11.5307 12.5276 11.6523 12.5762C11.7739 12.6248 11.8672 12.71 11.932 12.8316C11.9969 12.9613 12.003 13.089 11.9503 13.2146C11.8976 13.3403 11.8023 13.4234 11.6645 13.4639C11.4781 13.5287 11.2875 13.5754 11.093 13.6037C10.8984 13.6321 10.7039 13.6463 10.5093 13.6463ZM10.4607 6.83669C10.331 6.83669 10.2033 6.8448 10.0776 6.86101C9.95197 6.87722 9.82835 6.9056 9.70675 6.94613C9.56893 6.98666 9.4372 6.98261 9.31155 6.93397C9.18589 6.88533 9.09064 6.80021 9.02579 6.67861C8.96093 6.55701 8.95485 6.43338 9.00755 6.30773C9.06024 6.18208 9.15144 6.09898 9.28115 6.05845C9.47571 5.9936 9.67027 5.94496 9.86483 5.91253C10.0594 5.8801 10.258 5.86389 10.4607 5.86389C11.547 5.86389 12.4711 6.24085 13.2331 6.99477C13.9952 7.74869 14.3762 8.6688 14.3762 9.75509V9.84021L14.8139 9.40245C14.9031 9.31328 15.0166 9.26869 15.1544 9.26869C15.2922 9.26869 15.4057 9.31328 15.4949 9.40245C15.5841 9.49162 15.6287 9.60512 15.6287 9.74293C15.6287 9.88074 15.5841 9.99424 15.4949 10.0834L14.2303 11.348C14.133 11.4453 14.0195 11.494 13.8898 11.494C13.7601 11.494 13.6466 11.4453 13.5493 11.348L12.2847 10.0834C12.1955 9.99424 12.1509 9.88074 12.1509 9.74293C12.1509 9.60512 12.1955 9.49162 12.2847 9.40245C12.3738 9.31328 12.4873 9.26869 12.6251 9.26869C12.763 9.26869 12.8765 9.31328 12.9656 9.40245L13.4034 9.84021V9.75509C13.4034 8.94442 13.1176 8.25536 12.5461 7.68789C11.9746 7.12042 11.2794 6.83669 10.4607 6.83669Z"
          fill="#48D0DB"
        />
      </g>
    </StyledSVG>
  )
}

const dash = keyframes`
  to {
    stroke-dashoffset: 0;
  }
`

const StyledSVG = styled(Svg)`
  fill: none;
  color: inherit;
  .refreshBorder {
    animation: ${dash} 32s linear forwards infinite;
  }
`
